<template>
    <div class="page-admin">
        <panel-group />
        <el-row class="middle-panel">
            <el-col :span="6" class="middle-panel-item">
                <pie-chart />
            </el-col>

            <el-col :span="18" class="middle-panel-item">
                <train-class />
            </el-col>
        </el-row>

        <el-row class="bottom-panel">
            <el-col :span="12" class="bottom-panel-item">
                <div>

                </div>
            </el-col>

            <el-col :span="12" class="bottom-panel-item">
                <div>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import panelGroup from './components/panelGroup'
import pieChart from './components/pieChart'
import trainClass from './components/trainClass'
export default {
    components: { panelGroup, pieChart, trainClass},
    name: 'admin',

}
</script>

<style lang="less" scoped>
    .page-admin {
        padding: 0 50px 0 44px;
        width: 100%;
        box-sizing: border-box;

        .middle-panel {
            margin: 20px -10px;

            .middle-panel-item {
                box-sizing: border-box;
                padding: 0 10px;

                >div {
                    height: 460px;
                    border: 1px solid #E5E8EC;
                }
            }
        }
        
        .bottom-panel {
            margin-left: -10px;
            margin-right: -10px;

            .bottom-panel-item {
                box-sizing: border-box;
                padding: 0 10px;

                >div {
                    height: 500px;
                    border: 1px solid #E5E8EC;
                }
            }
        }
    }
</style>

